<template>
	<view class="container">
		<view class="v-search">
			<uni-search-bar placeholder="输入资料名称" bgColor="#fff" clearButton="auto" @confirm="search"
				@cancel="clearSearch" @clear="clearSearch" />
			<view class="v-nav">
				<view class="v-nav-item" v-for="(item, index) in datas.Categories" @click="categoryClick(item)">
					<view class="v-nav-item-title" :class="item.Check===true?'v-nav-item-title-check':''">
						{{ item.Title }}
					</view>
				</view>
			</view>
		</view>

		<view class="v-contents">
			<view class="v-content-item" v-for="(item, index) in datas.Contents" @click="contentClick(item)">
				<view class="v-content-item-left">
					<image class="v-content-item-image" :src="getServerPath(item.ImageUrl)" mode="scaleToFill"></image>
				</view>
				<view class="v-content-item-right">
					<text class="v-content-item-title">{{ item.Title }}</text>
					<text class="v-content-item-time">{{ item.CreateTime }}</text>
				</view>
			</view>
			<uni-load-more :status="datas.loadStatus"></uni-load-more>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
	export default {
		data() {
			return {
				messageText: '',
				msgType: 'success',
				duration: 2000,

				datas: {
					Categories: [
						// {
						// 	Id: '0000-00-000-0000',
						// 	Title: '全部'
						// },
						// {
						// 	Id: '0000-00-000-0000',
						// 	Title: '平台简介'
						// },
						// {
						// 	Id: '0000-00-000-0000',
						// 	Title: '新人必看'
						// },
						// {
						// 	Id: '0000-00-000-0000',
						// 	Title: '文件公告'
						// },
						// {
						// 	Id: '0000-00-000-0000',
						// 	Title: '会议报名'
						// },
						// {
						// 	Id: '0000-00-000-0000',
						// 	Title: '产品介绍'
						// },
						// {
						// 	Id: '0000-00-000-0000',
						// 	Title: '规则介绍'
						// }
					],
					Contents: [
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '智利欢乐马288干红葡萄酒',
						// 	ImageUrl: '../../static/header.jpg',
						// 	Content: '',
						// 	CreateTime: '2024-04-05 12:23'
						// },
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '智利欢乐马288干红葡萄酒',
						// 	ImageUrl: '../../static/header.jpg',
						// 	Content: '',
						// 	CreateTime: '2024-04-05 12:23'
						// },
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '智利欢乐马288干红葡萄酒',
						// 	ImageUrl: '../../static/header.jpg',
						// 	Content: '',
						// 	CreateTime: '2024-04-05 12:23'
						// }
					],
					queryContent: '',
					totalPage: 0,
					currentPage: 1,
					pageRow: 5,
					loadStatus: 'more'
				}
			};
		},
		methods: {
			search(item) {
				console.log(item.value);
				let _this = this;
				_this.datas.Contents = [];
				_this.datas.queryContent = item.value;
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				var curCategory = _this.datas.Categories.find(c => c.Check === true);
				_this.loadContents(curCategory);
			},
			clearSearch() {
				let _this = this;
				_this.datas.Contents = [];
				_this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				var curCategory = _this.datas.Categories.find(c => c.Check === true);
				_this.loadContents(curCategory);
			},
			loadCategories: function(item) {
				console.log('loadCategories');
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();

				uni.request({
					url: _this.sysInfo.BasePath + 'Cms/GetCmsCategorDatas',
					method: 'POST',
					data: {},
					header: {
						'content-type': 'application/json',
						'Authorization': `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res)
							_this.datas.Categories = res.data.Data;
							if (_this.datas.Categories && _this.datas.Categories.length > 0) {
								_this.categoryClick(_this.datas.Categories[0])
							}

						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载分类信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载分类信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
			},
			categoryClick: function(item) {
				console.log('categoryClick');
				let _this = this;
				_this.datas.Categories.forEach((i) => {
					i.Check = false;
				});
				item.Check = true;

				_this.datas.Contents = [];
				// _this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;

				_this.loadContents(item);
			},
			loadContents: function(item) {
				console.log('loadContents');
				// uni.stopPullDownRefresh();
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();
				var queryData = {
					PageSize: _this.datas.pageRow,
					PageIndex: _this.datas.currentPage,
					CategoryId: item.Id,
					QueryContent: _this.datas.queryContent
				};
				uni.request({
					url: _this.sysInfo.BasePath + 'Cms/GetCmsDatasByCategoryId',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						'Authorization': `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res)
							res.data.Data.Datas.forEach(item => {
								_this.datas.Contents.push(item);
							})
							_this.datas.totalPage = res.data.Data.TotalPage;
						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载资料信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载资料信息失败！',
							icon: 'error'
						});
					},
					complete: () => {

					}
				});

				uni.stopPullDownRefresh();
				if (_this.datas.currentPage >= _this.datas.totalPage) {
					_this.datas.loadStatus = 'noMore';
				} else {
					_this.datas.loadStatus = 'more';
				}

			},
			getServerPath: function(url) {
				let _this = this;
				console.log(`${_this.sysInfo.ImageBasePath}${url}`);
				return `${_this.sysInfo.ImageBasePath}${url}`;
			},
			contentClick: function(item) {
				console.log('contentClick');
				console.log(item);
				let _this = this;
				uni.setStorage({
					key: 'CurrentCms',
					data: item,
					success: function() {
						uni.navigateTo({
							url: '/pages/index/cms-content'
						});
					}
				});

			},
			init: function() {
				console.log('init');
				let _this = this;
				_this.datas.Categories = [];
				_this.loadCategories();
			}
		},
		onReachBottom() {
			console.log('onReachBottom');
			let _this = this;

			if (_this.datas.currentPage >= _this.datas.totalPage) {
				_this.datas.loadStatus = 'noMore';
				return;
			} else {
				_this.datas.currentPage = _this.datas.currentPage + 1;
				var curCategory = _this.datas.Categories.find(c => c.Check === true);
				_this.loadContents(curCategory);
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			let _this = this;
			_this.datas.Contents = [];
			// _this.datas.queryContent = '';
			_this.datas.currentPage = 1;
			_this.datas.totalPage = 0;
			var curCategory = _this.datas.Categories.find(c => c.Check === true);
			_this.loadContents(curCategory);
		},
		onShow() {
			let _this = this;
			_this.init();
		},
		created() {
			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: "/pages/account/login"
				})
			})
			// _this.init();
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		/* background-color: #f0f0f0; */
		min-height: 100%;
		padding-top: 190rpx;
	}

	.v-search {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

	.uni-searchbar {
		flex: 1;
	}

	.v-search ::v-deep .uni-searchbar__box {
		border: solid 1px #ce4d0e;
		/* height:70rpx; */
	}

	.v-search ::v-deep uni-text {
		color: #ce4d0e !important;
	}

	.v-search ::v-deep .uni-input-placeholder {
		color: #ce4d0e50 !important;
	}

	.v-nav {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		overflow-x: scroll;
		margin: 20rpx 20rpx 0 20rpx;
		height: 60rpx;
		box-sizing: border-box;
	}

	.v-nav-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		margin-right: 20rpx;
		white-space: nowrap;
		font-size: 26rpx;
		color: #333;
	}

	.v-nav-item-title-check {
		color: #ce4d0e;
	}

	.v-contents {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 0 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		flex: 1;
	}

	.v-content-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		width: 100%;
		margin-bottom: 20rpx;
		cursor: pointer;
		position: relative;
		box-shadow: 0rpx 5rpx 10rpx #999;
		background-color: #fff;
	}

	.v-content-item-left {
		display: flex;
		flex-direction: row;
		justify-content: stretch;
		align-items: stretch;
	}

	.v-content-item-image {
		width: 200rpx;
		height: 200rpx;
	}

	.v-content-item-right {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		color: #333;
		padding: 20rpx;
		box-sizing: border-box;
		flex: 1;
	}

	.v-content-item-title {
		font-size: 32rpx;
		flex: 1;
	}

	.v-content-item-time {
		font-size: 26rpx;
		color: #666;
	}
</style>